<template>
    <div class="app-container">
        <div class="mycontent">
            <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="12" :lg="18">
                 <el-card class="update-log">
                    <div slot="header" class="clearfix">
                        <h3 class="title">{{ resourceType }}</h3>
                     </div>
  
            <div class="body">
              <el-row type="flex" class="row-bg parent-element" v-for="item in articleList" :key="item.articleId">
                <el-col :span="6">
                  <div class="zhanwei a" v-if="item.imgurl==null||item.imgurl==''">  
                    <i class="el-icon-picture-outline"></i>  
                  </div>
                  <div class="zhanwei a" v-if="item.imgurl!=null&&item.imgurl!=''">  
                    <img :src="item.imgurl" width="100%" height="100%" @click="addclicknum(item)">
                  </div>
                </el-col>
                <el-col :span="18">
                  <div class="child-element"> 
                      <span class="mytag">{{dict.type.sys_resource_type[item.dictType].label}}</span>
                      <h2 class="click hinline"><a @click="addclicknum(item)">{{ item.title }}</a>
                      </h2>
                      <br>
                      <span class="small"><i class="el-icon-time"></i>{{ item.createTime }}</span>
                      <span class="small"> <i class="el-icon-user-solid"></i>{{ item.createBy }}</span>
                      <span class="small click a"
                      @click="$router.push({ 
                        name: 'content', 
                        query: { scrollTo: 'bottom-element-id' },
                        params:{articleid:item.articleId} })"> 
                        <i class="el-icon-chat-round" ></i>评论
                      </span>
                      <!-- class="small click a right" -->
                      <span @click="dianzan(item)" :class="{ 'active': item.likeCount > 0 }" class="small click a right"> 
                        <i class="iconfont icon-good"></i>点赞({{ item.likeCount }})
                      </span>
                      <p class="small text">
                      {{ item.introduce }}
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
         
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="6">
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <h3 class="title">热门文章</h3>
            </div>
            <div class="body">
              <el-row type="flex" class="rmwz" v-for="item in limitedItems" :key="item.articleId">
                <el-col :span="10">
                  <div class="zhanwei a" v-if="item.imgurl==null||item.imgurl==''">  
                    <i class="el-icon-picture-outline"></i>  
                  </div>
                  <div class="zhanwei a" v-if="item.imgurl!=null&&item.imgurl!=''">  
                    <img :src="item.imgurl" width="100%" height="100%" @click="addclicknum(item)">
                  </div>
                </el-col>
                <el-col :span="14"><div class="click"> 
                    <span class="text" @click="addclicknum(item)">{{ item.title }}</span>
                    <br>
                    <span class="small">{{ item.createTime }}</span>
                    <br>
                </div>
                </el-col>
              </el-row>
            </div>
          </el-card>
          
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <h3 class="title">热门标签</h3>
            </div>
            <div class="body">
                <el-tag size="medium" :type="getColor(item.labelId)" class="tag" @click="toClassRetrieval(item)" v-for="item in options" :key="item.labelId">{{ item.labelName }}</el-tag>
            </div>
          </el-card>
  
          <el-card class="update-log">
            <div slot="header" class="clearfix">
              <h3 class="title">网站统计</h3>
            </div>
  
            <div class="body">
              <el-descriptions>
              <el-descriptions-item label="日志总数" labelStyle=" font-weight: bold;">14121</el-descriptions-item>
              <el-descriptions-item label="评论总数" labelStyle=" font-weight: bold;">4</el-descriptions-item>
              <el-descriptions-item label="标签总数" labelStyle=" font-weight: bold;">370</el-descriptions-item>
              <el-descriptions-item label="页面总数" labelStyle=" font-weight: bold;">3</el-descriptions-item>
              <el-descriptions-item label="分类总数" labelStyle=" font-weight: bold;">8</el-descriptions-item>
              <el-descriptions-item label="链接总数" labelStyle=" font-weight: bold;">0</el-descriptions-item>
              <el-descriptions-item label="用户总数" labelStyle=" font-weight: bold;">5</el-descriptions-item>
              <el-descriptions-item label="最后更新" labelStyle=" font-weight: bold;">2024-03-06</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
  
        </el-col>
      </el-row>

      <div style="display: flex; justify-content: center; ">
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
            />
      </div>
        </div>
        <div class="footer">
            <p>版权所有 &copy; 2024 示例公司</p>  
            <p>联系我们: <a href="#">example@example.com</a></p>  
            <p><a href="#">网站地图</a></p>  
        </div>
    </div>

</template>

<script>
import { listArticle,updateArticle,rmlistArticle } from "@/api/system/article";
import { listLabel } from "@/api/system/label";
export default {
name: 'ResourcePage',  
  props: {  
    resourceType: {  
      type: String,  
      required: true  
    }
  } ,
  dicts: ['sys_resource_type'],
  
  data() {
    return {
      options: [], 
      types: ['success', 'danger', 'medium', 'info', 'warning',''],
      tagname:'',
      // 总条数
      total: 0,
      // 文章查询表格数据
      articleList: [],
      // 热门文章查询表格数据
      rmarticleList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        likeCount: null,
        dictType: null,
        introduce: null,
        url: null,
        content: null,
      },
    };
  },
  created() {
    this.getList();
  },
  watch: {  
    // 当 resourceType prop 发生变化时，这个函数会被调用  
        resourceType(newVal, oldVal) {  
            if (newVal !== oldVal) {
                console.log("触发了") ;
                this.getList();
            }  
        }
    },
    
  computed: {  
    getColor() {  
    return (index) => {  
      return this.types[index % this.types.length];  
    };  
    },  
    limitedItems() {  
      const LIMIT = 5; // 这里设置你想要的循环次数  
      return this.rmarticleList.slice(0, LIMIT);  
    }  
  },
  methods: {
    /** 查询文章查询列表 */
    getList() {
      this.loading = true;
      listLabel(this.queryParams).then(response => {
        this.options = response.data;
      });
      if(this.resourceType=='值得一看'){
        this.queryParams.dictType=0;
      }else if(this.resourceType=='动漫资源'){
        this.queryParams.dictType=1;
      }else if(this.resourceType=='娱乐资讯'){
        this.queryParams.dictType=2;
      }else if(this.resourceType=='电影资源'){
        this.queryParams.dictType=3;
      }else{
        this.queryParams.dictType=4;
      }
      rmlistArticle(this.queryParams).then(response => {
        this.rmarticleList = response.data;
      });
      
      listArticle(this.queryParams).then(response => {
        this.articleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
     
    },
    toClassRetrieval(item){
      this.$router.push({name:'tagpage',params:{tag:item.labelName}});
    },
    dianzan(item){
      if(item.likeCount===0){
        item.likeCount++;
      }
      else{
        item.likeCount--;
      }
      updateArticle(item);
    },
    addclicknum(item){
      item.clicknum++;
      updateArticle(item);
      this.$router.push({name:'content',params:{articleid:item.articleId}});
    }
  }
};
</script>

<style scoped>

.text{
  word-wrap:break-word;
  word-break:break-all;
}
.child-element{
  margin-top: 2%;
  line-height: 2;
}
.hinline{
  display: inline;
}
.mytag{
  padding: 5.5px 10px;
  color: #EFEFEF;
  font-size: 14px;
  background-image: url('../../assets/iconfront/dialog-right-copy.png');
  background-repeat: no-repeat; /* 不重复 */  
  background-position: center center; /* 图片居中 */  
  background-size: cover; /* 图片覆盖整个元素，可能会裁剪 */  
  vertical-align: top;
}
.mytime{
  font-size: 14px;
  color: #999999;
}
.mynote{
  font-size: 14px;
  font-weight: bold;
  color: #999999;
  margin-right: 8px;
}
.inline{
  display: flex;
  justify-content: flex-end;
}
h3{
  margin: 5px 0;
}
.right{
  float: right;
}
.app-container{
    padding: 0px;
}
.footer {  
        margin-top: 80px;
        background-color: #333;  
        color: #fff;  
        padding: 20px;  
        text-align: center;  
        width: 100%;  
        }  
.title{
    font-weight: bold;
    font-size: 16px;
    color: #666;
}
.mycontent{
    margin: 0px 80px;
}
.update-log{
  margin-bottom: 20px;
}
.row-bg:hover{
  background-color: #EFEFEF;
}
.click:hover{
  color: #fcb900;
  cursor: pointer;
}
.small{
  margin-right: 20px;
  font-size: 14px;
  color: #999999;
}
.tag{
    margin:5px 5px;
    cursor: pointer;
}
.zhanwei{
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100%;
  border: 1px solid rgb(212, 212, 212);
  margin-right: 10px;
  background-color: #EFEFEF;
}
.a:hover{
  cursor: pointer;
}
.row-bg{
  border: 1px solid rgb(212, 212, 212);
  padding: 20px;
}
.rmwz{
  border: 1px solid rgb(212, 212, 212);
  padding: 20px;
}

.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
.active{
  color: #fcb900;
}
</style>